<template>
  <table class="table-bordered" border="1">
    <tr>
      <td>房型名称</td>
      <td>
         <input type="text" v-model="roomtype.rType_Name" />
      </td>
    </tr>
    <tr>
      <td>房型价格</td>
      <td>
         <input type="text" v-model="roomtype.rType_Price" />
      </td>
    </tr>
    <tr>
      <td>押金</td>
      <td>
         <input type="text" v-model="roomtype.rType_Deposil" />
      </td>
    </tr>
    <tr>
      <td>面积</td>
      <td>
          <input type="text" v-model="roomtype.rType_Size" />
      </td>
    </tr>
    <tr>
      <td>可住人数</td>
      <td>
         <input type="text" v-model="roomtype.rType_Num" />
      </td>
    </tr>
    <tr>
      <td>可否加床</td>
      <td>
        <input type="radio" name="addbed" :value="true" v-model="roomtype.rType_AddBed">加床
        <input type="radio" name="addbed" :value="false" v-model="roomtype.rType_AddBed">不加床
      </td>
    </tr>
    <tr>
      <td>房型图片</td>
      <td>
        <img style="width:80px;height:80px" :src="roomtype.rType_Img">
        <input type="file"  @change="GetRoomTypeimag">
      </td>
    </tr>
    <tr>
      <td>房型描述</td>
      <td>  <input type="text" v-model="roomtype.rType_Info" /></td>
    </tr>
    <tr>
      <td>房型投放</td>
      <td>
        <input type="text" v-model="roomtype.rType_State" />
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <input type="button" value="修改房型信息"  @click="UpRoomType"/>
      </td>
    </tr>
  </table>
</template>

<script setup lang="ts">
import { ref ,onMounted} from "vue";
import axios from "axios";
import { useRoute } from "vue-router";
const route = useRoute();
const roomtype = ref({
  rType_id: 0,
  rType_Name: "",
  rType_Price: 0,
  rType_Deposil: 0,
  rType_Size: 0,
  rType_Num: 0,
  rType_AddBed: true,
  rType_Img: "",
  rType_Info: "",
  rType_State: "",
});


// 上传图片
const Rtimage = ref(null);
const GetRoomTypeimag = (e:any) => {
    Rtimage.value = e.target.files[0];
console.log(Rtimage.value);
    if (!Rtimage.value) {
        alert('请选择图片');
        return;
    }
    //创建FromData对象
    const fd = new FormData();
    fd.append('image', Rtimage.value);

    axios.post('https://localhost:7071/api/Files/RoomTypeFiles', fd)
        .then(res => {
            console.log(res.data);
            if (res.data.fileComm_Code == 0) {
              alert( res.data.fileComm_Msg)

            }

            else if (res.data.fileComm_Code == 1) {
                  alert( res.data.fileComm_Msg)
            }
            else  {
             alert( res.data.fileComm_Msg)
        } 
            roomtype.value.rType_Img = res.data.fileComm_Path;
           
    })
}

// 添加房间类型
const UpRoomType = () => {
    axios.put('https://localhost:7071/api/RoomType/UpRoomType', roomtype.value)
        .then(res => {
            if (res.data > 0) {
                alert('修改成功');
            }
           
            else {
                alert('修改失败');
        }
        })
        .catch(err => {
        console.log(err);
    })
}


onMounted(() => {
    UpSqlRoomType();
})

const UpSqlRoomType = () => {
    axios.get('https://localhost:7071/api/RoomType/UpSqlRoomType', {
        params: {
            Rid:route.params.id
        }
    })
    .then(res => {
        roomtype.value = res.data;
    })
}

</script>

<style scoped>
</style>